<template>
	<div>
		<el-card class="box-card" shadow="never" style="height: 140px; width: 100%;">
			<el-form :model="rawInQO" ref="rawInQO">
				<el-row>
					<el-col :span="6" :offset="0">
						<el-form-item label="采购单编号" prop="cgNo" label-width="150px">
							<el-input v-model="rawInQO.cgNo" filterable clearable placeholder="请输入采购单编号"
								style="width:150px;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" :offset="0">
						<el-form-item label="原料名称" prop="riName" label-width="150px">
							<el-input v-model="rawInQO.riName" filterable clearable placeholder="请输入原料名称"
								style="width:150px;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" :offset="0">
						<el-form-item label="状态" prop="riStatus" label-width="150px">
							<el-select v-model="rawInQO.riStatus" filterable clearable placeholder="请选择状态"
								style="width: 150px;">
								<el-option v-for="s in status" :key="s.value" :label="s.label" :value="s.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="6" :offset="0">
						<el-form-item label="供应商" prop="riSname" label-width="150px">
							<el-select v-model="rawInQO.riSname" filterable clearable placeholder="请选择"
								style="width: 150px;">
								<el-option v-for="s in allSuppliers" :key="s.name" :label="s.name" :value="s.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6" :offset="0">
						<el-form-item label="仓库名称" prop="riStorage" label-width="150px">
							<el-select v-model="rawInQO.riStorage" filterable clearable placeholder="请选择"
								style="width: 150px;">
								<el-option v-for="s in allStorages" :key="s.name" :label="s.name" :value="s.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8" :offset="3">
						<el-button type="info" plain @click="select(1)">查询</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
						<el-button type="warning" plain
							@click="resetForm('rawInQO')">重置</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
					</el-col>
				</el-row>
			</el-form>
		</el-card></br>

		<el-card class="box-card" shadow="never" style="height: 420px; width: 100%;">
			<el-table :data="currentRawIns" border>
				<el-table-column type="index"></el-table-column>
				<el-table-column prop="cgNo" label="采购单编号" align="center"></el-table-column>
				<el-table-column prop="riName" label="原料名称" align="center"></el-table-column>
				<el-table-column prop="riStorage" label="原料仓库" align="center"></el-table-column>
				<el-table-column prop="cgGname,cgNum,cgUname" label="商品信息" align="center">
					<template slot-scope="scope">
						{{scope.row.cgGname}}{{scope.row.cgNum}}{{scope.row.cgUname}}
					</template>
				</el-table-column>
				<el-table-column prop="riNum" label="原料库存" align="center"></el-table-column>
				<el-table-column prop="riIn" label="入库时间" align="center"></el-table-column>
				<el-table-column prop="riEnd" label="更新时间" align="center"></el-table-column>
				<el-table-column prop="riStatus" label="入库单状态" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.riStatus == 1">待审核</span>
						<span v-if="scope.row.riStatus == 2">已审核</span>
						<span v-if="scope.row.riStatus == 3">已领取</span>
						<span v-if="scope.row.riStatus == 4">已完成</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-row v-if="scope.row.riStatus == 1">
							<el-button type="success" plain @click="edit(scope)">审核</el-button>
						</el-row>
						<el-row v-if="scope.row.riStatus == 2 || scope.row.riStatus == 3">
							<el-button type="primary" plain @click="getOut(scope)">领取</el-button>
						</el-row>
						<el-row v-if="scope.row.riStatus == 4">
							<el-button type="warning" plain>已完成</el-button>
						</el-row>
					</template>
				</el-table-column>
			</el-table></br>
			<el-pagination background layout="prev, pager, next" :current-page.sync="currentPage"
				:page-count="totalPage" @current-change="goPage">
			</el-pagination>
		</el-card>

		<el-dialog title="审核原料入库单" :visible.sync="dialogUpdate">
			<el-form :model="updateRawIn" ref="updateRawIn">
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="采购单号" prop="cgNo" label-width="80px">
							<el-input v-model="updateRawIn.cgNo" disabled filterable clearable
								placeholder="请输入采购单号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset="1">
						<el-form-item label="商品名称" prop="cgGname" label-width="80px">
							<el-select v-model="updateRawIn.cgGname" disabled filterable clearable
								placeholder="请选择商品名称">
								<el-option v-for="g in allGoods" :key="g.name" :label="g.name" :value="g.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="商品数量" prop="cgNum" label-width="80px">
							<el-input-number v-model="updateRawIn.cgNum" :disabled="true"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset="1">
						<el-form-item label="商品单位" prop="cgUname" label-width="80px">
							<el-select v-model="updateRawIn.cgUname" disabled filterable clearable
								placeholder="请选择商品单位">
								<el-option v-for="u in allUnits" :key="u.name" :label="u.name" :value="u.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="原料名称" prop="riName" label-width="80px">
							<el-input v-model="updateRawIn.riName" filterable clearable
								placeholder="请输入原料名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset="1">
						<el-form-item label="供应商" prop="riSname" label-width="80px">
							<el-select v-model="updateRawIn.riSname" filterable clearable placeholder="请选择供应商">
								<el-option v-for="s in allSuppliers" :key="s.name" :label="s.name" :value="s.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="原料数量" prop="riNum" label-width="80px">
							<el-input-number v-model="updateRawIn.riNum" :min="updateRawIn.cgNum" :max="10000"
								:step="100" step-strictly></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset="1">
						<el-form-item label="原料单价" prop="riPrice" label-width="80px">
							<el-input-number v-model="updateRawIn.riPrice" :precision="1" :min="0" :max="100"
								:step="0.1" step-strictly></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="原料仓库" prop="riStorage" label-width="80px">
							<el-select v-model="updateRawIn.riStorage" filterable clearable placeholder="请选择仓库">
								<el-option v-for="s in allStorages" :key="s.name" :label="s.name" :value="s.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogUpdate=false">取 消</el-button>
				<el-button type="primary" @click="update">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="添加原料领取单" :visible.sync="dialogGetOut">
			<el-form :model="addLingLiao" ref="addLingLiao">
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="采购单号" prop="cgNo" label-width="80px">
							<el-input v-model="addLingLiao.cgNo" disabled filterable clearable
								placeholder="请输入采购单号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset="0">
						<el-form-item label="商品名称" prop="cgGname" label-width="80px">
							<el-select v-model="addLingLiao.cgGname" disabled filterable clearable
								placeholder="请选择商品名称">
								<el-option v-for="g in allGoods" :key="g.name" :label="g.name" :value="g.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="原料名称" prop="riName" label-width="80px">
							<el-input v-model="addLingLiao.riName" disabled filterable clearable
								placeholder="请输入原料名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset="1">
						<el-form-item label="原料仓库" prop="riStorage" label-width="80px">
							<el-select v-model="addLingLiao.riStorage" disabled filterable clearable
								placeholder="请选择仓库">
								<el-option v-for="s in allStorages" :key="s.name" :label="s.name" :value="s.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="领取数量" prop="roNum" label-width="80px">
							<el-input-number v-model="addLingLiao.roNum" :min="100" :max="addLingLiao.riNum" :step="100"
								step-strictly></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogGetOut=false">取 消</el-button>
				<el-button type="primary" @click="addGetOut">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import axios from "axios"
	export default {
		name: "yuanliao",
		data() {
			return {
				// allGoods: [],
				// allUnits：[],
				// allSuppliers: [],
				// allStorages: [],

				rawInQO: {},
				currentRawIns: [],

				dialogAdd: false,
				dialogUpdate: false,
				dialogGetOut: false,

				updateRawIn: {},
				addLingLiao: {},

				status: [{
					value: '1',
					label: '待审核'
				}, {
					value: '2',
					label: '已审核'
				}, {
					value: '3',
					label: '已领取'
				}, {
					value: '4',
					label: '已完成'
				}],

				totalPage: 0,
				currentPage: 0,

				allGoods: [{
					name: '无籽蜜桔'
				}, {
					name: '武鸣沃柑'
				}, {
					name: '红富士苹果'
				}, {
					name: '新鲜牛排肉'
				}, {
					name: '新鲜五花肉'
				}, {
					name: '优质猪瘦肉'
				}, {
					name: '海鸭咸鸭蛋'
				}],
				allUnits: [{
					name: '千克'
				}, {
					name: '克'
				}, {
					name: '斤'
				}, {
					name: '个'
				}],
				allSuppliers: [{
					name: '沂蒙果蔬种植合作社'
				}, {
					name: '宏进冰鲜猪副产品批发'
				}, {
					name: '惠盈食用农产品经营部'
				}],
				allStorages: [{
					name: '成都生鲜仓库'
				}, {
					name: '上海生鲜仓库'
				}, {
					name: '武汉生鲜仓库'
				}],
			}
		},
		methods: {
			addGetOut() {
				axios.post("/yuanliaoAPI/yuanliao/getOut", this.addLingLiao)
					.then(res => {
						if (res.data.code == 111) {
							this.$message({
								type: 'warning',
								message: '库存不足!'
							});
						};
						if (res.data.code == 200) {
							this.dialogGetOut = false;
							this.goPage(this.currentPage);
							// this.getAll();
							this.$message({
								type: 'success',
								message: '领取成功!'
							});
						};
						this.resetForm('addLingLiao');
					});
			},
			getOut(scope) {
				this.dialogGetOut = true;
				//数据回显
				this.addLingLiao = {
					...scope.row
				}
			},
			update() {
				if (this.updateRawIn.riId) {
					axios.post("/yuanliaoAPI/yuanliao/update", this.updateRawIn)
						.then(res => {
							if (res.data.code == 200) {
								this.dialogUpdate = false;
								this.goPage(this.currentPage);
								// this.getAll();
								this.$message({
									type: 'success',
									message: '审核成功!'
								});
							}
						});
					axios.post("/yuanliaoAPI/yuanliao/pay", this.updateRawIn)
						.then(res => {
							if (res.data.code == 200) {
								this.dialogUpdate = false;
								this.goPage(this.currentPage);
								// this.getAll();
								this.$message({
									type: 'success',
									message: '添加应付款订单成功!'
								});
							}
						});
				}
			},
			edit(scope) {
				this.dialogUpdate = true;
				//数据回显
				this.updateRawIn = {
					...scope.row
				}
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			select(p) {
				axios.get("/yuanliaoAPI/yuanliao/list/" + p, {
					params: this.rawInQO
				}).then(res => {
					if (res.data.code == 200) {
						this.currentRawIns = res.data.data.list;
						this.totalPage = res.data.data.pages;
						this.currentPage = 1;
						this.$message({
							type: 'success',
							message: '查询成功!'
						});
					}
				})
			},
			goPage(p) {
				axios.get("/yuanliaoAPI/yuanliao/list/" + p, {
					params: this.rawInQO
				}).then(res => {
					if (res.data.code == 200) {
						this.currentRawIns = res.data.data.list;
						this.totalPage = res.data.data.pages;
					}
				})
			},
			getAll() {
				//获取所有商品信息
				axios.get("/").then(res => {
					if (res.data.code == 200) {
						this.allGoods = res.data.data;
					}
				})
				//获取所有单位信息
				axios.get("/").then(res => {
					if (res.data.code == 200) {
						this.allUnits = res.data.data;
					}
				})
				//获取所有供应商信息
				axios.get("/").then(res => {
					if (res.data.code == 200) {
						this.allSuppliers = res.data.data;
					}
				})
				//获取所有仓库信息
				axios.get("/").then(res => {
					if (res.data.code == 200) {
						this.allStorages = res.data.data;
					}
				})
			}
		},
		mounted() {
			// this.getAll();
			this.goPage(1);
		}
	}
</script>

<style>

</style>